<template>
    <div class="fillcontain">
      <el-row>
        <el-col>
          <el-select v-model="pages.article_id" filterable placeholder="请选择">
            <el-option
              v-for="item in articles"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" @click="initData">搜索</el-button>
        </el-col>
        <el-col>
          <el-button type="primary" @click="handleEdit(0, '','add')">新增章节</el-button>
        </el-col>
      </el-row>
      <br/>
        <div class="table_container">
            <el-table
                :data="userTableData"
                style="width: 100%"
                v-loading="loading">
              <el-table-column
                label="书名"
                prop="article.title">
              </el-table-column>
              <el-table-column
                label="章节名"
                prop="stitle">
              </el-table-column>

              <el-table-column
                label="标题"
                prop="title">
              </el-table-column>

              <el-table-column
                label="排序"
                prop="sort">
              </el-table-column>
              <!--
              <el-table-column
                label="价格"
                prop="price">
              </el-table-column>
-->
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'edit')">
                      编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeleteAlert( scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="Pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pages.page"
                  :page-size="pages.pageSize"
                  layout="total, prev, pager, next"
                  :total="pages.total">
                </el-pagination>
            </div>

            <el-dialog :title="dialog.title" :visible.sync="dialog.dialogFormVisible" :close-on-click-modal="dialog.close">
                <el-form :model="section">
                    <el-form-item label="书籍" label-width="100px">
                      <el-select v-model="section.article_id" filterable placeholder="请选择">
                        <el-option
                          v-for="item in articles"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="章节名" label-width="100px">
                        <el-input v-model="section.sTitle" auto-complete="off"></el-input>
                    </el-form-item>
                  <el-form-item label="标题" label-width="100px">
                    <el-input v-model="section.title" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="排序" label-width="100px">
                    <el-input-number v-model="section.sort"></el-input-number>
                  </el-form-item>
                  <el-form-item label="内容" label-width="100px">
                    <Editor v-bind:content="section.content" ref="editor"></Editor>
                  </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialog.dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSave">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
  import { baseUrl,baseImgPath } from '../../api/env';
  import Editor from '../../components/Editor'
  export default {
    components: {
      Editor
    },
    data(){
          return {
              baseUrl,
              baseImgPath,
              loading:false,
              section:{
                  id:0,
                  sTitle:"",
                  title:"",
                  sort:1,
                  content:"",
                  article_id:""
              },
              dialog:{
                  dialogFormVisible:false,
                  title:"新增店家",
                  close:false,
              },
              pages:{
                  offset: 0,
                  pageSize: 10,
                  page: 1,
                  total: 0,
                  article_id:""
              },
              userTableData: [],
              editor:null,
              articles:[],
          }
      },
      created(){
          this.initArticle();
          this.pages.article_id = this.$route.query.article_id;
          this.initData();

      },
      mounted() {
      },
    methods: {
          initData(){
            this.loading = true;
            var that = this;
            that.$api.get('/admin/article/sections', that.pages, response => {
              if (response.status >= 200 && response.status < 300) {
                var res = response.data;
                if (res.code == 0) {
                  that.userTableData = res.data.articleSections.content;
                  that.pages.total = res.data.articleSections.totalElements;
                }else{
                  this.$message({
                    message: res.msg,
                    type: 'warning'
                  });
                }
              } else {
                this.$message({
                  message: "服务器维护中",
                  type: 'error'
                });
              }
              this.loading = false;
            });




          },
          initArticle(){
            var that = this;
            that.$api.get('/admin/article', {pageSize: 10000}, response => {
              if (response.status >= 200 && response.status < 300) {
                var res = response.data;
                if (res.code == 0) {
                  that.articles = res.data.articles.content;
                }else{
                }
              } else {
              }
            });
          },
          handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
          },
          handleCurrentChange(val) {
              this.pages.page = val;
              this.pages.offset = (val - 1)*this.pages.pageSize;
              this.initData()
          },
          handleEdit(index, row,action) {
              if(action == "edit"){
                  this.dialog.title = "修改章节";
                  this.section.id = row.id;
                  this.section.sTitle = row.stitle;
                  this.section.title = row.title;
                  this.section.sort = row.sort;
                  this.section.content = row.content;
                  this.section.article_id = "" + row.article.id;

                  this.dialog.dialogFormVisible = true;
              }else if(action == "add"){
                  this.section.id = 0;
                  this.dialog.title = "新增章节";
                  this.section.sTitle = "";
                  this.section.title = "";
                  this.section.sort = 100;
                  this.section.content = "";
                  this.section.article_id = "";

                  this.dialog.dialogFormVisible = true;
              }
          },
          handleSave() {
              this.loading = true;
              var that = this;
              var editor = this.$refs.editor
              this.section.content = editor.getContent();
              that.$api.post('/admin/article/sections', that.section, response => {
                if (response.status >= 200 && response.status < 300) {
                  console.log(response.data);
                  var res = response.data;
                  if (res.code == 0) {
                    this.$message({
                      message: that.dialog.title+'成功',
                      type: 'success'
                    });
                    this.dialog.dialogFormVisible = false;
                    this.initData();
                  }else{
                    this.$message({
                      message: res.msg,
                      type: 'warning'
                    });
                  }
                } else {
                  this.$message({
                    message: "服务器维护中",
                    type: 'error'
                  });
                }

              });

              this.loading = false;
          },
          handleDeleteAlert(row) {
              this.$confirm('此操作将删除该章节, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  this.handleDelete(row);
              }).catch(() => {

              });
          },
        handleDelete(row) {
          this.loading = true;
          var that = this;
          that.$api.delete('/admin/section/'+row.id, null, response => {
            if (response.status >= 200 && response.status < 300) {
                console.log(response.data);
                var res = response.data;
                if (res.code == 0) {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.loading = false;
                  this.initData();
                }else{
                  this.$message({
                    message: res.msg,
                    type: 'warning'
                  });
                }
            } else {
                this.$message({
                  message: "服务器维护中",
                  type: 'error'
                });
            }

          });
          },
      },
  }
</script>

<style lang="less">
	@import '../../style/mixin';
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .table_container{
        padding: 20px;
    }
    .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>
